<template>
  <el-collapse id="custom-subWork">
    <el-collapse-item v-for="(work, index) in works" :key="work.uid" :name="work.uid">
      <template slot="title">
        {{ getTitle(level, index, work.workdesc ) }}
        <i
          :class="getStatusIcon(work)"
          :style="'color: ' + getStatusColor(work)"
        />
      </template>

      <work-instruction :work="work" :role="role" :workuid="workuid" :editable="editable" :id="id" />
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import WorkInstruction from './WorkInstruction'
import SubWork from './SubWork'
import { getUsername } from '@/utils/auth'

export default {
  name: 'SubWork',
  components: {
    WorkInstruction,
    SubWork
  },
  props: {
    workdata: {
      default: () => [],
      type: Array
    },
    parentuid: {
      default: '',
      type: String
    },
    work: {
      type: null,
      default: ''
    },
    role: {
      default: '',
      type: String
    },
    workuid: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    level: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    index: {
      type: Number,
      default: null
    }
  },
  computed: {
    works: function() {
      const that = this
      console.log('[WorkUnit-Index]-[computed]-workdata:')
      console.log(that.workdata)
      return that.workdata.filter(v => v.puid === that.parentuid)
    },
    isAllComplete() {
      const tem = this.workdata.every(
        value =>
          value.executeresult &&
          value.executeresult.length &&
          value.executeresult[0].executestatus &&
          value.executeresult[0].executestatus === '已执行'
      )

      console.log(tem, 'tem')
      return tem
    }
  },
  watch: {
    isAllComplete: {
      handler(val) {
        this.$emit('subIsAllComplete', {
          index: this.index,
          work: this.work,
          isAllComplete: val,
          uid: this.parentuid
        })
      },
      immediate: true
    }
  },

  created() {
    console.log(this.workdata, 'workdata')
  },
  methods: {
    getTitle(level, index, desc) {
      return level + (index + 1) + '  ' + desc
    },
    getNextLevel(level, index) {
      if (level) {
        return level + (index + 1) + '.'
      } else {
        return index + 1 + '.'
      }
    },
    getStatusIcon(work) {
      console.log(work, 'work')
      const that = this
      const result = work.executeresult.find(
        v => v.role === that.role && v.executestatus === '已执行'
      )
      if (result) {
        return 'el-icon-success'
      } else {
        return 'no-icon'
      }
    },
    getStatusColor(work) {
      const that = this
      const results = work.executeresult.filter(
        v => v.role === that.role && v.executestatus === '已执行'
      )
      console.log(
        '[WorkUnit-index]-[getStatusColor]-results(' + work.workdesc + '):'
      )
      console.log(results)
      if (results && results.length > 0) {
        if (results.find(v => v.name.indexOf(getUsername()) !== -1)) {
          return 'green'
        } else {
          return '#FF910C'
        }
      }
    },
    getDescendants(works, uid) {
      var descendants = []
      var level = 0
      var forFn = function(works, uid, level) {
        for (var i = 0; i < works.length; i++) {
          var item = works[i]
          if (item.puid === uid) {
            item.level = level
            descendants.push(item)
            forFn(works, item.uid, level + 1)
          }
        }
      }
      forFn(works, uid, level)
      return descendants
    }
  }
}
</script>

<style lang="scss">
#custom-subWork {
  .el-collapse-item {
    margin-left: 20px;
    margin-top: 20px;
  }
}
.el-collapse-item__header {
  height: auto;
}

.el-collapse-item__content {
  margin-top: 0px;
  padding-bottom: 0px;
}

.el-collapse-item__wrap {
  border-bottom: 0px;
}
</style>
